/**
 * UI组件模块
 * 提供通用UI组件和交互逻辑
 */

const { ipcRenderer } = require('electron');

/**
 * 初始化UI组件
 */
function initialize() {
    console.log('初始化UI组件...');
    
    // 设置网络相关UI组件
    setupNetworkUI();
    
    // 设置设置页面UI组件
    setupSettingsUI();
    
    // 初始化网络测速功能
    initNetworkSpeedTest();
    
    console.log('UI组件初始化完成');
}

/**
 * 设置网络相关UI组件
 */
function setupNetworkUI() {
    // 处理连接网络按钮
    const connectButton = document.getElementById('connect-network');
    if (connectButton) {
        connectButton.addEventListener('click', () => {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            if (!username || !password) {
                showToast('请输入用户名和密码', 'error');
                return;
            }
            
            // 发送连接请求
            ipcRenderer.send('connect-network', { username, password });
            
            // 更新按钮状态
            connectButton.disabled = true;
            connectButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 连接中...';
            
            // 5秒后恢复按钮状态
            setTimeout(() => {
                connectButton.disabled = false;
                connectButton.innerHTML = '<i class="fas fa-wifi"></i> 连接网络';
            }, 5000);
        });
    }
    
    // 监听网络状态变化
    ipcRenderer.on('network-status', (event, status) => {
        console.log('[网络状态] 状态更新:', status);
        console.log('[状态详情]', {
            时间: new Date().toLocaleString(),
            状态: status,
            详细信息: typeof status === 'object' ? status : { 状态: status }
        });
        
        // 更新网络状态显示
        updateNetworkStatusUI(status);
    });
    
    // 监听登录过程
    ipcRenderer.on('login-process', (event, data) => {
        console.log('[登录过程] 状态更新:', data.step);
        console.log('[过程详情]', {
            步骤: data.step,
            时间: new Date().toLocaleString(),
            详情: data.details || '无'
        });
        
        // 更新登录过程显示
        updateLoginProcessUI(data);
    });
    
    // 监听自动重连
    ipcRenderer.on('auto-reconnect', (event, data) => {
        console.log('[自动重连] 触发重连');
        console.log('[重连详情]', {
            时间: new Date().toLocaleString(),
            尝试次数: data.attempt,
            状态: data.status,
            下次重试: data.nextRetry
        });
        
        // 更新重连状态显示
        updateReconnectStatusUI(data);
    });
}

/**
 * 更新网络状态UI
 * @param {Object|string} status - 网络状态
 */
function updateNetworkStatusUI(status) {
    const statusElement = document.getElementById('network-status');
    if (!statusElement) return;
    
    if (typeof status === 'string') {
        statusElement.textContent = status;
        
        // 根据状态设置颜色
        if (status.includes('已连接') || status.includes('成功')) {
            statusElement.style.color = '#27ae60'; // 绿色
        } else if (status.includes('断开') || status.includes('失败')) {
            statusElement.style.color = '#e74c3c'; // 红色
        } else {
            statusElement.style.color = '#3498db'; // 蓝色
        }
    } else if (typeof status === 'object') {
        // 处理对象类型的状态
        statusElement.textContent = status.message || JSON.stringify(status);
        
        // 根据状态设置颜色
        if (status.connected) {
            statusElement.style.color = '#27ae60'; // 绿色
        } else {
            statusElement.style.color = '#e74c3c'; // 红色
        }
    }
}

/**
 * 更新登录过程UI
 * @param {Object} data - 登录过程数据
 */
function updateLoginProcessUI(data) {
    const processElement = document.getElementById('login-process');
    if (!processElement) return;
    
    processElement.textContent = `${data.step}: ${data.details || ''}`;
    
    // 根据步骤设置颜色
    if (data.step.includes('成功')) {
        processElement.style.color = '#27ae60'; // 绿色
    } else if (data.step.includes('失败') || data.step.includes('错误')) {
        processElement.style.color = '#e74c3c'; // 红色
    } else {
        processElement.style.color = '#3498db'; // 蓝色
    }
}

/**
 * 更新重连状态UI
 * @param {Object} data - 重连数据
 */
function updateReconnectStatusUI(data) {
    const reconnectElement = document.getElementById('reconnect-status');
    if (!reconnectElement) return;
    
    reconnectElement.textContent = `重连尝试: ${data.attempt}, 状态: ${data.status}, 下次重试: ${data.nextRetry || '无'}`;
    
    // 根据状态设置颜色
    if (data.status.includes('成功')) {
        reconnectElement.style.color = '#27ae60'; // 绿色
    } else if (data.status.includes('失败')) {
        reconnectElement.style.color = '#e74c3c'; // 红色
    } else {
        reconnectElement.style.color = '#3498db'; // 蓝色
    }
}

/**
 * 设置设置页面UI组件
 */
function setupSettingsUI() {
    // 设置项事件处理
    const autoStartCheckbox = document.getElementById('auto-start');
    const autoConnectCheckbox = document.getElementById('auto-connect');
    const saveSettingsButton = document.getElementById('save-settings');
    const resetSettingsButton = document.getElementById('reset-settings');
    
    // 处理用户名和密码输入
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');
    const togglePasswordButton = document.getElementById('toggle-password');
    
    if (!autoStartCheckbox || !autoConnectCheckbox || !saveSettingsButton || 
        !resetSettingsButton || !usernameInput || !passwordInput) {
        console.warn('设置页面元素未找到，跳过初始化');
        return;
    }
    
    // 密码显示/隐藏功能
    if (togglePasswordButton) {
        togglePasswordButton.addEventListener('click', function () {
            const passwordInput = document.getElementById('password');
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            
            // 更新图标
            const icon = this.querySelector('i');
            if (type === 'text') {
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
                this.setAttribute('title', '隐藏密码');
            } else {
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
                this.setAttribute('title', '显示密码');
            }
            
            // 添加动画效果
            this.classList.add('pulse-animation');
            setTimeout(() => {
                this.classList.remove('pulse-animation');
            }, 500);
        });
    }
    
    // 用户名输入处理
    usernameInput.addEventListener('input', (e) => {
        e.preventDefault();
        const value = e.target.value;
        console.log('[用户输入] 用户名更新:', value ? '已输入' : '空');
        
        // 验证用户名
        if (value && value.length >= 3) {
            e.target.classList.add('is-valid');
            e.target.classList.remove('is-invalid');
        } else if (value && value.length > 0) {
            e.target.classList.add('is-invalid');
            e.target.classList.remove('is-valid');
        } else {
            e.target.classList.remove('is-valid', 'is-invalid');
        }
    });
    
    // 密码输入处理
    passwordInput.addEventListener('input', (e) => {
        e.preventDefault();
        const value = e.target.value;
        console.log('[用户输入] 密码更新:', value ? '已输入' : '空');
        
        // 验证密码
        if (value && value.length >= 6) {
            e.target.classList.add('is-valid');
            e.target.classList.remove('is-invalid');
        } else if (value && value.length > 0) {
            e.target.classList.add('is-invalid');
            e.target.classList.remove('is-valid');
        } else {
            e.target.classList.remove('is-valid', 'is-invalid');
        }
    });
    
    // 保存设置按钮点击事件
    saveSettingsButton.addEventListener('click', function () {
        const username = usernameInput.value;
        const password = passwordInput.value;
        
        // 验证输入
        if (!username || !password) {
            showToast('用户名和密码不能为空', 'error');
            return;
        }
        
        // 发送保存请求到主进程
        ipcRenderer.send('save-settings', {
            username,
            password,
            autoStart: autoStartCheckbox.checked,
            autoConnect: autoConnectCheckbox.checked
        });
        
        showToast('设置已保存', 'success');
    });
    
    // 重置设置按钮点击事件
    resetSettingsButton.addEventListener('click', function () {
        // 确认对话框
        if (confirm('确定要重置所有设置吗？这将清除您保存的用户名、密码和偏好设置。')) {
            // 清空输入框
            usernameInput.value = '';
            passwordInput.value = '';
            
            // 重置复选框
            autoStartCheckbox.checked = false;
            autoConnectCheckbox.checked = false;
            
            // 移除输入框验证状态
            usernameInput.classList.remove('is-valid', 'is-invalid');
            passwordInput.classList.remove('is-valid', 'is-invalid');
            
            // 发送重置请求到主进程
            ipcRenderer.send('reset-settings');
            
            // 显示成功提示
            showToast('所有设置已重置', 'success');
            document.getElementById('settings-status').textContent = '设置已重置';
            
            // 添加按钮动画效果
            resetSettingsButton.classList.add('btn-animated');
            setTimeout(() => {
                resetSettingsButton.classList.remove('btn-animated');
            }, 500);
        }
    });
    
    // 监听配置加载
    ipcRenderer.on('config-loaded', (event, config) => {
        console.log('[配置加载] 开始加载配置');
        if (config) {
            console.log('[配置详情]', {
                自动启动: config.autoStart,
                自动连接: config.autoConnect,
                用户名存在: !!config.username,
                密码存在: !!config.password
            });
            
            autoStartCheckbox.checked = config.autoStart;
            autoConnectCheckbox.checked = config.autoConnect;
            
            if (config.username) {
                console.log('[配置加载] 已加载保存的用户名');
                usernameInput.value = config.username;
            }
            if (config.password) {
                console.log('[配置加载] 已加载保存的密码');
                passwordInput.value = config.password;
            }
        } else {
            console.log('[配置加载] 无可用配置');
        }
    });
    
    // 处理开机自启动设置
    autoStartCheckbox.addEventListener('change', function (e) {
        console.log('设置开机自启动:', e.target.checked);
        ipcRenderer.send('set-auto-start', e.target.checked);
    });
    
    // 监听开机自启动设置结果
    ipcRenderer.on('auto-start-set', (event, enabled) => {
        console.log('开机自启动设置结果:', enabled);
        autoStartCheckbox.checked = enabled;
    });
    
    // 处理自动连接网络设置
    autoConnectCheckbox.addEventListener('change', function (e) {
        console.log('设置自动连接网络:', e.target.checked);
        ipcRenderer.send('set-auto-connect', e.target.checked);
    });
    
    // 监听自动连接设置结果
    ipcRenderer.on('auto-connect-set', (event, enabled) => {
        console.log('自动连接设置结果:', enabled);
        autoConnectCheckbox.checked = enabled;
    });
    
    // 监听自动连接请求
    ipcRenderer.on('trigger-connect', (event, { username, password }) => {
        console.log('[自动连接] 收到自动连接触发请求');
        
        // 确保用户名和密码已设置
        if (username && password) {
            // 设置输入框的值
            usernameInput.value = username;
            passwordInput.value = password;
            
            // 触发连接
            console.log('[自动连接] 执行连接操作');
            const connectButton = document.getElementById('connect-network');
            if (connectButton && !connectButton.disabled) {
                connectButton.click();
            }
        } else {
            console.log('[自动连接] 失败：缺少用户名或密码');
            showToast('自动连接失败：未设置用户名或密码', 'error');
        }
    });
}

/**
 * 初始化网络测速功能
 */
function initNetworkSpeedTest() {
    const speedTestBtn = document.getElementById('speed-test-btn');
    const speedResult = document.getElementById('speed-result');
    
    if (!speedTestBtn || !speedResult) {
        console.warn('网络测速元素未找到，跳过初始化');
        return;
    }
    
    // 测速按钮点击事件
    speedTestBtn.addEventListener('click', () => {
        // 更新按钮状态
        speedTestBtn.disabled = true;
        speedTestBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 测速中...';
        speedResult.innerHTML = '<div class="loading">正在测速，请稍候...</div>';
        
        // 发送测速请求
        ipcRenderer.send('test-network-speed');
    });
    
    // 监听测速结果
    ipcRenderer.on('speed-test-result', (event, result) => {
        // 恢复按钮状态
        speedTestBtn.disabled = false;
        speedTestBtn.innerHTML = '<i class="fas fa-tachometer-alt"></i> 开始测速';
        
        // 显示测速结果
        if (result.success) {
            speedResult.innerHTML = `
                <div class="speed-item">
                    <div class="speed-label">下载速度</div>
                    <div class="speed-value">${result.download} Mbps</div>
                </div>
                <div class="speed-item">
                    <div class="speed-label">上传速度</div>
                    <div class="speed-value">${result.upload} Mbps</div>
                </div>
                <div class="speed-item">
                    <div class="speed-label">延迟</div>
                    <div class="speed-value">${result.ping} ms</div>
                </div>
                <div class="speed-item">
                    <div class="speed-label">测试时间</div>
                    <div class="speed-value">${new Date().toLocaleString()}</div>
                </div>
            `;
        } else {
            speedResult.innerHTML = `<div class="error">测速失败: ${result.error}</div>`;
        }
    });
}

/**
 * 显示通知提示
 * @param {string} message - 提示消息
 * @param {string} type - 提示类型 (success, error, info)
 */
function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.textContent = message;
    
    document.body.appendChild(toast);
    
    // 显示动画
    setTimeout(() => {
        toast.classList.add('show');
    }, 10);
    
    // 自动关闭
    setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => {
            document.body.removeChild(toast);
        }, 300);
    }, 3000);
}

/**
 * 清理资源
 */
function cleanup() {
    // 移除事件监听器
    ipcRenderer.removeAllListeners('network-status');
    ipcRenderer.removeAllListeners('login-process');
    ipcRenderer.removeAllListeners('auto-reconnect');
    ipcRenderer.removeAllListeners('config-loaded');
    ipcRenderer.removeAllListeners('auto-start-set');
    ipcRenderer.removeAllListeners('auto-connect-set');
    ipcRenderer.removeAllListeners('trigger-connect');
    ipcRenderer.removeAllListeners('speed-test-result');
}

// 导出模块
module.exports = {
    initialize,
    showToast,
    cleanup
};